import { BrowserRouter as Router, Route, Routes, Link, useNavigate } from 'react-router-dom';

interface ToolCardProps {
    icon: React.ReactNode;
    title: string;
    description: string;
    to?: string
}

const ToolCard: React.FC<ToolCardProps> = ({ icon, title, description, to }) => {
    const navigate = useNavigate();

    const go2Detail = () => {
        navigate(to || '/');
        // if (to) {
        //     navigate(to);
        // } else {
            
        // }
    }
    return (
        <div className="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg p-6 flex flex-col items-center transition-all hover:shadow-lg">
            {icon}
            <h3 className="mt-4 text-xl font-semibold">{title}</h3>
            <p className="mt-2 text-center">{description}</p>
            <button onClick={go2Detail} className="mt-4 px-4 py-2 bg-white text-primary rounded-full hover:bg-opacity-90 transition-colors">
                Go
            </button>
        </div>
    );
}

export default ToolCard;